<template>
    <div class="news">
        <!-- 导航栏 -->
        <van-nav-bar title="瓜夕夕" fixed></van-nav-bar>
        <!-- 内容面板 -->
        <van-notice-bar
            scrollable 
            left-icon="volume-o"
            text="写代码不是有手就行？写代码也太开心了！"/>
        <!-- 消息列表 -->
        <div class="tabcontainer">
            <div class="panel">
                <div v-if="$store.state.issend" class="newslist">
                    <ul>
                        <router-link to="/word">
                        <li>
                            <img src="https://img01.yzcdn.cn/vant/cat.jpeg">
                            <span class="left">		
                                <div class="name">客服消息</div>			
                                <div class="infor">你好</div>
                            </span>
                            <span class="right">		
                                <div class="date">7-29</div>
                            </span>
                        </li>
                        </router-link>
                    </ul>
                </div>
                <van-empty v-else  description="主人，没有您的消息哦！" />
            </div>
        </div>
        <!-- 页脚 -->
        <van-tabbar v-model="active" border fixed router>
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="live" icon="video-o" dot>直播</van-tabbar-item>
            <van-tabbar-item name="news" to="news" icon='chat-o' badge="5">消息</van-tabbar-item>
            <van-tabbar-item to="shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="me" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: "news",
            
        };
    },

}
</script>

<style>
.news .van-nav-bar{
    background-color: rgb(86, 206, 132);
}

.news .van-nav-bar__title{
    color: aliceblue;
    font-size: 20px;
}

.news .van-notice-bar{
    position: fixed;
    top:46px;
    left: 0;
    right: 0;
}

.news .tabcontainer{
    position:fixed;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 55px;
    overflow-y:scroll;
}



.news .newslist ul{
    list-style: none;
    background-color: #FFFFFF;
    padding: 0px 2.7% 0px 2.7%;
}

.news .newslist ul li{
    height: auto;
    border-bottom: 1px solid #c2c0c0;
    padding: 10px 0px 10px 0px;
}

.news .newslist li img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.news .newslist .left{
    display:inline-block ;
    vertical-align: top;
}

.news .newslist .name{
    color: #666666;
    font-size: 16px;
    line-height: 30px;
}

.news .newslist .infor{
    color: #9c9b9b;
    font-size: 13px;
}

.news .newslist .right{
    float: right;
    color: #9c9b9b;
    font-size: 15px;
}
</style>
